<template>
  <section>
    <ym-query-view params="form"
                   :model="form"
                   @search="handlerSearch">
      <el-form inline
               label-position="right"
               label-width="130px">
        <el-form-item label="下单时间"
                      prop="下单时间">
          <el-date-picker v-model.trim="form.下单时间"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="预约时间"
                      prop="预约时间">
          <el-date-picker v-model.trim="form.预约时间"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          clearable>
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="预约电话">
          <el-input v-model.trim="form.预约电话"
                    placeholder="请输入"
                    type="number"
                    clearable></el-input>
        </el-form-item>-->
        <el-form-item label="下单用户">
          <el-input v-model.trim="form['下单人:用户名称']"
                    placeholder="请输入"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="状态"
                      prop="status">
          <el-select v-model.trim="form.nodetype"
                     clearable
                     filterable>
            <el-option v-for="(item,index) in nodetypeOpts"
                       :key="index"
                       :label="item.namecode"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </ym-query-view>
    <list-table :loading="loading"
                :data="data"
                :total='total'
                :filterAnd="filterAnd"
                :currentPage="currentPage"
                :size="size"
                @load="getList"></list-table>
  </section>
</template>
<script>
import { paramsFilter } from '@/utils/params-filter'
import queryMixins from '@/views/mixins/query'
import { accMul, accDiv } from '@/utils/calculate'
import dayjs from 'dayjs'
export default {
  mixins: [queryMixins],
  components: {
    listTable: () => import('./component/list-table.vue')
  },
  data () {
    return {
      busiName: 'ServicOrders'
    }
  },
  async mounted () {
    this.handlerSearch()
    this.storeOpts = await this.$store.dispatch('options/getStoreOptions', 'exclude')
    this.nodetypeOpts = await this.$store.dispatch('options/getOptions', { busiName: this.busiName, rela: 213 })
  },
  methods: {
    handlerSearch (e) {
      this.filterAnd = paramsFilter(this.form, {
        like: ['下单人:用户名称'],
        rangeDate: ['下单时间', '预约时间']
      })
      if (this.selectStoreId) {
        this.filterAnd.push('预约门店', this.selectStoreId)
      }
      this.currentPage = 1
      if (!e && this.$route.query.page) {
        this.currentPage = Number(this.$route.query.page)
      }
      if (this.$route.query.size) {
        this.perPage = Number(this.$route.query.size)
      }
      this.getList()
    },
    getList (page, size) {
      this.currentPage = page || this.currentPage
      this.size = size || this.size
      this.loading = true
      this.$command.execute({
        api: `/api/SelectByConds/${this.busiName}`,
        params: {
          index: Number(this.currentPage) - 1,
          pageSize: this.size,
        },
        data: {
          "CONDS": [].concat(this.filterAnd),
          "COLUMNS": ["id", "NodeType", "下单人", "下单人:id|用户名称 user", "下单时间", "人数", "优惠金额", "到店时间", "发票抬头", "发票类型", "实收金额", "状态", "预约人", "预约备注", "预约时间", "预约电话", "预约门店", "预约门店:名称|id store", "标题名"]
        }
      }).then(res => {
        this.data = res.data.map(e => {
          e.优惠金额 = accDiv(e.优惠金额, 100)
          e.实收金额 = accDiv(e.实收金额, 100)
          return {
            ...e,
            discountAmount: e.优惠金额,
            totalAmount: e.实收金额,
            orderTime: dayjs(e.预约时间),
            toStoreTime: dayjs(e.到店时间),
            storeId: Number(e.预约门店),
            peopleNum: e.人数,
            reservationPeople: e.预约人,
            reservationMobile: e.预约电话
          }
        })
        console.log(this.data)
        this.total = res.total
        this.loading = false
      })
    }
  }
}
</script>
